<template>
  <div style="margin-top: 50px">
    <el-form
      :model="value"
      ref="productInfoForm"
      label-width="160px"
      class="form-inner-container"
      size="small"
      :rules="rules"
    >
      <el-form-item label="名称：" prop="couponName">
        <el-input v-model="value.couponName"></el-input>
      </el-form-item>
      <el-form-item label="类型：" prop="couponType">
        <el-select size="small" v-model="value.couponType" style="width: 100%">
          <el-option
            v-for="item in couponTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量：" prop="batchNumber" size="small">
        <el-input-number
          v-model="value.batchNumber"
          :min="1"
          size="small"
          :controls="false"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="产品：" prop="productId">
        <el-select size="small" v-model="value.productId" style="width: 100%">
          <el-option
            v-for="item in products"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券有效期：" prop="periodValidity">
        <el-date-picker
          v-model="value.periodValidity"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
          value-format="timestamp"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="组织" prop="organizationId">
        <el-cascader
          :options="orgList"
          :props="{
            children: 'childs',
            label: 'organizationName',
            value: 'id',
            emitPath: false,
          }"
          v-model="value.organizationId"
          :show-all-levels="false"
          change-on-select
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="value.remark"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleSave"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SingleUpload from "@/components/Upload/singleUpload.vue";
import SelectScroll from "@/components/SelectScroll.vue";
import Upload from "@/components/Upload/index.vue";
import { couponTypes } from "@/utils/constant/ams";
import { fetchProductList } from "@/api/product";
import { httpOrgListOrg } from "@/api/org";

export default {
  name: "ProductInfoDetail",
  components: { Upload, SelectScroll, SingleUpload },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      products: [],
      periodValidity: [],
      hasEditCreated: false,
      couponTypes: couponTypes.toKeyValueArray(),
      rules: {
        couponName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        couponType: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
        batchNumber: [
          { required: true, message: "请输入数量", trigger: "blur" },
          {
            type: "number",
            message: "数量必须为数字",
            trigger: ["blur", "change"],
          },
        ],
        productId: [
          { required: true, message: "请选择产品", trigger: "change" },
        ],
        periodValidity: [
          { required: true, message: "请选择优惠券有效期", trigger: "blur" },
        ],
      },
      orgList: [],
    };
  },
  created() {
    fetchProductList({
      pageNum: 1,
      pageSize: 10000,
    }).then((res) => {
      this.products = res.data.list.map((item) => {
        return {
          label: item.productName,
          value: item.id,
        };
      });
    });

    httpOrgListOrg().then((res) => {
      if (res.code === 200) {
        this.orgList = res.data;
      }
    });
  },
  computed: {
    //商品的编号
    productId() {
      return this.value.id;
    },
  },
  watch: {},
  methods: {
    handleSave() {
      this.$refs.productInfoForm.validate((valid) => {
        if (valid) {
          this.$emit("finishCommit", this.isEdit);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped></style>
